<template>
	<view>
		<!-- <scroll-view style="width:100%;height: 100%;" scroll-y :scroll-top="scrollTop" @scrolltolower="loadMore" @scroll="scrollTopFun"
		 :lower-threshold="50"> -->
		<view class="fexHead">
			<!-- <image src="/static/diqiuquan/quanleft.png" mode=""></image> -->
			<text>地球圈</text>
			<!-- <image src="/static/diqiuquan/quanright.png" mode="" @tap="toAll"></image> -->
		</view>
		<view class="select-tab" v-if="isShow">
			<view class="sanjiaox"></view>
			<view class="hidden-box">
				<view class="small-Box" @tap="toMyDynamics">
					<image src="/static/diqiuquan/littleearth.png"></image>
					<view class="menu-title">我的动态</view>
				</view>
				<view class="small-Box active" @tap="toMyCollection">
					<image class="img1" src="../../../static/jingjie/collection.png"></image>
					<view class="menu-title">我的收藏</view>
				</view>
			</view>
		</view>
		<view class="padding-box">
			<view class="jingjie-head">
				<view class="menu" v-for="(item,index) in menuLists" :key="index" :class="{active2:titleIndex==index}" @tap="selseMenu(index)"
				 v-text="item">
					<view v-if="titleIndex==index" class="smallBox"></view>
				</view>
				<image class="menuImg" src="/static/diqiuquan/quanright.png" mode="" @tap="toAll"></image>
			</view>
		</view>
		<!-- <image src="../../../static/a.png" mode=""></image> -->
		<view class="" v-if="titleIndex==0">
			<view class="headBox">
				<view class="">
					<image :mode="aspectFill" class="headBgImg" :src="myInfo.background_pic== '' ? picImg  :myInfo.background_pic" mode="" @tap="getToken"></image>
					<!-- <text v-if="myInfo.background_pic==''" class="setImg">点击设置封面</text> -->
				</view>
				
				

				<!-- <view class="head">
							<image src="/static/diqiuquan/quanleft.png" mode=""></image>
							<text>地球圈</text>
							<image src="/static/diqiuquan/quanright.png" mode="" @tap="toAll"></image>
						</view> -->
				<view class="userBox">
					<text>{{myInfo.nick_name}}</text>
					<view class="userImg">
						<image class="userHead" :src="myInfo.avatar" mode=""></image>
						<image class="huiyuan" v-if="myInfo.member_level==1" src="../../../static/wode/huiyuan.png" mode=""></image>
						<image class="huiyuan" v-else-if="myInfo.member_level==2" src="../../../static/wode/baijinhuiyuan.png" mode=""></image>
						<image class="huiyuan" v-else-if="myInfo.member_level==3" src="../../../static/wode/zuanshihuiyuan.png" mode=""></image>
						<image class="huiyuan" v-else src="../../../static/wode/huiyuan2.png" mode=""></image>
					</view>
				</view>
			</view>
			<view id="tab-bar">
				<earth @showComment="showComment" @huifuComment="huifuComment" @showGift="showGift" @showShare="showShare" v-for="(item,index) in youquanList"
				 :key="index" :index="index" :item="item" :isDetail='false'></earth>
			</view>
			<keyFrame @toComment="toComment" :isShow="iskeyFrame" @loseFocus="loseFocus" :focusState="focusState" :huifuname="huifuname"></keyFrame>
			<!-- </scroll-view> -->
			<!-- <share :isshowShare='isshowShare' @closeShare='closeShare' :itemData='itemData' :shareType='"earth"'></share> -->
			<gift :isshowGift='isshowGift' :cat_coin='myInfo.cat_coin' :pay_id='id' :payment_id='payment_id' @getyouquanList='getyouquanList'
			 @getuserdata='getuserdata' @hideAll='hideAll'></gift>
			<mask :isShowMask='isShowMask' @closeMask='closeMask'></mask>
		</view>

		<view class="margin-box" v-else-if="titleIndex==1">
			<view class="haoqi_item" v-for="(item,index) in haoqiLists" :key="index">
				<curiousList @moreCurious="moreCurious(item.id)" @toVideoDetails="toVideoDetails" @toImgDetails="toImgDetails"
				 @classChannel="classChannel" :item="item" :index="index"></curiousList>
			</view>

			<view class="aniu-box common" @tap="changehaoqiPage">
				<image class="shuaxin" src="../../../static/jingjie/shuaxin.png"></image>
				<view class="font-style">换一批好奇</view>
			</view>
		</view>
		<movable-area class="movableRange">
			<movable-view class="editBox" :x="x" :y="y" direction="all" @tap="publish">
				<image src="/static/diqiuquan/fabu.png"></image>
			</movable-view>
		</movable-area>
	</view>
</template>

<script>
	import earth from '../../../components/earth.vue'
	import keyFrame from '../../../components/keyFrame.vue'
	import mask from '../../../components/mask.vue'
	import gift from '../../../components/gift.vue'
	// import share from '../../../components/share.vue'
	import qiniu from "../../../common/qiniuUploader.js"
	import curiousList from '../../../components/curiousList.vue'


	export default {
		components: {
			earth,
			keyFrame,
			mask,
			gift,
			// share,
			curiousList
		},
		data() {
			return {
				picImg:'http://img.curiousmore.com/YS5wbmc=',
				x: 550,
				y: 900,
				token: '',
				myInfo: '',
				menuLists: ['动态', '好奇'],
				youquanList: [], //动态数据
				haoqiLists: [], //好奇数据
				currentPage1: 1, //好奇页数
				giftList: [],
				titleIndex: '', //头部索引
				isShow: false,
				isShowMask: false,
				iskeyFrame: false,
				isShowNum: false,
				isSecret: false,
				isshowGift: false,
				isshowShare: false,
				menuIndex: '', //选择的礼物索引
				giftNum: 1, //礼物数
				type_id: '', //选择礼物id
				payment_id: '', //收礼物的用户id
				giftMoney: '', //选择的礼物价格
				id: '', //回复的地球圈id
				huifuname: '',
				ischild: false,
				reply_id: '', //回复的用户id
				parent_id: '', //回复的评论的id
				commentIndex: '', //回复的地球圈的索引
				content: '',
				currentPage: 1, //页数
				top: 0, // 顶部监听事件使用
				// scrollComponents: '#tab-bar', // tab 容器 计算距离顶部距离使用
				scrollViewomponents: '#tab-bar', // 内容 容器 计算距离顶部距离使用
				scrollTop: 0, // scroll-view组件 距离顶部距离，点击tab时间置顶使用
				showComponent: false, // 是否显示
				itemData: '', //要分享的球圈数据
				giftnum: [{
					num: 1314
				}, {
					num: 520
				}, {
					num: 188
				}, {
					num: 99
				}, {
					num: 66
				}, {
					num: 30
				}, {
					num: 10
				}, {
					num: 6
				}, {
					num: 1
				}]
			};
		},
		onLoad() {
			// this.getgiftList()
			// this.myInfo = uni.getStorageSync('user_info')
			// console.log(this.myInfo)
			this.getyouquanList()
		},
		onShow() {
			this.myInfo = uni.getStorageSync('user_info')
			console.log(this.myInfo)
			this.youquanList = []
			this.getyouquanList()
			this.isShow = false
			this.isShowMask = false
			this.iskeyFrame = false
			this.isShowNum = false
			this.isSecret = false
			this.isshowGift = false
			this.isshowShare = false
		},
		onBackPress() {
			if (this.showMask) {
				this.showMask = false;
				return true;
			} else {
				uni.showModal({
					title: '提示',
					content: '是否退出应用？',
					success: function(res) {
						if (res.confirm) {
							// 退出当前应用，改方法只在App中生效  
							plus.runtime.quit();
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				return true
			}
		},
		onPullDownRefresh() {
			if (this.titleIndex == 0) {
				this.currentPage = 1;
				this.youquanList = [];
				this.getyouquanList();
				setTimeout(function() {
					uni.stopPullDownRefresh();
				}, 1000);
			} else if (this.titleIndex == 1) {
				this.currentPage1 = 1
				this.haoqiLists = []
				this.selecthaoqi()
				setTimeout(function() {
					uni.stopPullDownRefresh();
				}, 1000);
			}
		},
		onReachBottom() {
			if (this.titleIndex == 0) {
				this.currentPage++;
				this.getyouquanList();
			}

		},
		methods: {
			publish() {
				if (this.titleIndex == 0) {
					uni.navigateTo({
						url: '/pages/Friend/dongTai/dongTai'
					})
				} else {
					uni.navigateTo({
						url: '/pages/World/publishCurious/publishCurious'
					})
				}

			},
			toAll() {
				this.isShow = true
				this.isShowMask = true
			},
			closeMask() {
				this.isShow = false
				this.isShowMask = false
				this.isshowGift = false
				this.isshowShare = false

				uni.showTabBar()

			},
			selseMenu(index) {
				this.titleIndex = index
				if (this.titleIndex == 1) {
					this.selecthaoqi()
				}else{
					this.getyouquanList()
				}
			},
			toMyDynamics() { //我的动态
				uni.navigateTo({
					url: '/pages/My/myDynamics/myDynamics?type=dongtai'
				})
				this.isShow = false
				this.isShowMask = false
			},
			toMyCollection() { //我的收藏
				uni.navigateTo({
					url: '/pages/My/myDynamics/myDynamics?type=shoucang'
				})
				this.isShow = false
				this.isShowMask = false
			},
			selecthaoqi() { //获取好奇数据
				var data = {
					oper_id: uni.getStorageSync('user_id'),
					currentPage: this.currentPage1,
					status: 1
				}
				var me = this
				this.myAjaxNew({
					model: 'news',
					controllerName: 'curiosity',
					actionName: 'queryHomeListPage',
					data: data,
					successBack: function(res) {
						if (res.data.data == '') {
							me.currentPage1 = 1
						}

						me.haoqiLists = res.data.data;
						console.log(me.haoqiLists, '好奇');
					}
				})
			},
			toVideoDetails(id) { //视频详情
				uni.navigateTo({
					url: '/pages/World/videoDetails/videoDetails?id=' + id
				})
			},
			toImgDetails(id) { //图片详情
				uni.navigateTo({
					url: '/pages/World/ImgDetails/ImgDetails?id=' + id
				})
			},
			moreCurious(id) { //更多好奇
				uni.navigateTo({
					url: '/pages/World/moreCurious/moreCurious?id=' + id
				})
			},
			classChannel(type) { //分类频道
				uni.navigateTo({
					url: '/pages/World/classChannel/classChannel?className=' + type
				})
			},
			changehaoqiPage() {
				this.currentPage1++;
				if (this.currentPage1 > 5) {
					this.currentPage1 = 1
				}
				this.selecthaoqi();
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},
			// #ifdef APP-PLUS
			getToken() {
				this.appselectImg()
			},
			appselectImg() { //app服务器上传
				// this.initQiniu();
				var me = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album'],
					success: function(res) {
						// me.card_front = res.tempFilePaths[0];
						var filePath = res.tempFilePaths[0];
						uni.uploadFile({
							url: 'http://www.curiousmore.com:8768/eg-api/push/upload/uploadPicture',
							// url: 'http://192.168.101.14:8768/eg-api/push/upload/uploadPicture',
							filePath: filePath,
							name: 'file',
							formData: {
								'user_id': uni.getStorageSync('user_id'),
								'type': 'pic'
							},
							success: function(uploadFileRes) {
								// me.backImgArr.push(JSON.parse(uploadFileRes.data)[0]);
								console.log(JSON.parse(uploadFileRes.data)[0]);
								var imageURL = JSON.parse(uploadFileRes.data)[0];
								me.setbgImg(imageURL)
							},
							fail: function(e) {
								uni.showToast({
									title: '图片上传失败，请重试',
									icon: 'none'
								})
								return;
							}
						});
					}
				});
			},
			// #endif
			//#ifdef MP-WEIXIN
			getToken() {
				var me = this;
				var data = {
					key: null,
				}
				this.myAjaxNewPost({
					model: 'push',
					controllerName: 'upload',
					actionName: 'getToken',
					data: data,
					successBack: function(res) {
						me.token = res.data.data
						console.log(me.token)
						me.selectImg()
					}
				})
			},
			//#endif
			selectImg() { //上传图片
				var me = this;
				uni.showActionSheet({
					itemList: ['拍照', '相册'],
					itemColor: '#008AFF',
					success: function(res) {
						var index = res.tapIndex;
						if (index == 1) {
							uni.chooseImage({
								count: 1,
								sizeType: ['compressed'],
								sourceType: ['album'],
								success: function(res) {

									// me.card_front = res.tempFilePaths[0];
									var filePath = res.tempFilePaths[0];
									// 交给七牛上传
									uni.showLoading({
										title: '上传中'
									})
									if (me.token != '') {
										qiniu.upload(filePath, (res) => {
											console.log(res.imageURL)
											var imageURL = res.imageURL
											me.setbgImg(imageURL)
											uni.hideLoading()
											console.log('file url is: ' + res.fileUrl);
										}, (error) => {
											uni.showToast({
												title: '上传失败',
												icon: null
											});
											console.log('error: ' + error);
										}, {
											region: 'ECN',
											domain: 'http://img.curiousmore.com', // // bucket 域名，下载资源时用到。如果设置，会在 success callback 的 res 参数加上可以直接使用的 ImageURL 字段。否则需要自己拼接
											key: null, // [非必须]自定义文件 key。如果不设置，默认为使用微信小程序 API 的临时文件名
											// 以下方法三选一即可，优先级为：uptoken > uptokenURL > uptokenFunc
											uptoken: me.token, // 由其他程序生成七牛 uptoken
											// uptokenURL: 'http://192.168.6.6:8768/eg-api/push/upload/getToken', // 从指定 url 通过 HTTP GET 获取 uptoken，返回的格式必须是 json 且包含 uptoken 字段，例如： {"uptoken": "[yourTokenString]"}
											uptokenFunc: function() {
												return '[yourTokenString]';
											}
										}, (res) => {
											console.log('上传进度', res.progress)
											console.log('已经上传的数据长度', res.totalBytesSent)
											console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend)

										}, () => {
											// 取消上传
										}, () => {
											// `before` 上传前执行的操作
										}, (err) => {
											// `complete` 上传接受后执行的操作(无论成功还是失败都执行)
										});
									}
								}
							});
						} else if (index == 0) {
							uni.chooseImage({
								count: 1,
								sizeType: ['compressed'],
								sourceType: ['camera'],
								success: function(res) {
									// me.card_front = res.tempFilePaths[0];
									var filePath = res.tempFilePaths[0];
									// 交给七牛上传
									uni.showLoading({
										title: '上传中'
									})
									if (me.token != '') {
										qiniu.upload(filePath, (res) => {
											console.log(res.imageURL)
											var imageURL = res.imageURL
											me.setbgImg(imageURL)
											uni.hideLoading()
											console.log('file url is: ' + res.fileUrl);
										}, (error) => {
											console.log('error: ' + error);
										}, {
											region: 'ECN',
											domain: 'http://img.curiousmore.com', // // bucket 域名，下载资源时用到。如果设置，会在 success callback 的 res 参数加上可以直接使用的 ImageURL 字段。否则需要自己拼接
											key: null, // [非必须]自定义文件 key。如果不设置，默认为使用微信小程序 API 的临时文件名
											// 以下方法三选一即可，优先级为：uptoken > uptokenURL > uptokenFunc
											uptoken: me.token, // 由其他程序生成七牛 uptoken
											// uptokenURL: 'http://192.168.6.6:8768/eg-api/push/upload/getToken', // 从指定 url 通过 HTTP GET 获取 uptoken，返回的格式必须是 json 且包含 uptoken 字段，例如： {"uptoken": "[yourTokenString]"}
											uptokenFunc: function() {
												return '[yourTokenString]';
											}
										}, (res) => {
											console.log('上传进度', res.progress)
											console.log('已经上传的数据长度', res.totalBytesSent)
											console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend)
										}, () => {
											// 取消上传
										}, () => {
											// `before` 上传前执行的操作
										}, (err) => {


											// `complete` 上传接受后执行的操作(无论成功还是失败都执行)
										});
									}
								}
							});
						}
					}
				});
			},
			// 监听滑动事件
			scrollTopFun(e) {
				let me = this;
				me.top = e.detail.scrollTop;
				// console.log(me.top)
				me.getScrollTop();
			},
			// 计算距离
			getScrollTop() {
				let me = this;
				let scrollView = uni.createSelectorQuery().select(this.scrollViewomponents);
				scrollView.boundingClientRect(data => {
					// data.top  tab节点离页面顶部的距离为;
					if (data.top <= 0) {
						// data.top  内容节点离页面顶部的距离为;
						me.showComponent = true;
					} else {
						me.showComponent = false;
					}
				}).exec();
			},
			setbgImg(img) { //设置背景图
				var me = this
				var data = {
					user_id: uni.getStorageSync('user_id'),
					background_pic: img
				}
				this.myAjaxNewPost({
					model: 'user',
					controllerName: 'userInfo',
					actionName: 'update',
					data: data,
					successBack: function(res) {
						console.log(res)
						if (res.data.message == '成功') {
							me.myInfo.background_pic = img
							me.getuserdata()
						}
					},
				})
			},
			getgiftList() {
				var me = this;
				this.myAjaxNew({
					model: 'user',
					controllerName: 'userGift',
					actionName: 'query',
					data: '',
					successBack: function(res) {
						console.log(res, '礼物列表')
						me.giftList = res.data.data
					},
				})

			},
			getyouquanList() {
				var me = this;
				var data = {
					oper_id: uni.getStorageSync('user_id'),
					currentPage: this.currentPage,
					status: 1
				}
				this.myAjaxNew({
					model: 'message',
					controllerName: 'noteUser',
					actionName: 'queryListPage',
					data: data,
					successBack: function(res) {
						console.log(res, '友圈信息')
						if (res.data.data != null || res.data.data.length != 0) {
							// me.youquanList = res.data.data
							for (var i = 0; i < res.data.data.length; i++) {
								res.data.data[i].picts = res.data.data[i].picts.split(',')
								me.youquanList.push(res.data.data[i])
							}

						}
					}
				})
			},
			toComment(content) {
				var me = this;
				this.content = content;
				if (this.ischild == true) {
					var data = {
						content: content,
						note_id: this.id, //地球圈id
						user_id: uni.getStorageSync('user_id'),
						parent_id: this.parent_id, //
						is_reply: true,
						reply_id: this.reply_id, //回复id
					}
				} else {
					var data = {
						content: content,
						note_id: this.id,
						user_id: uni.getStorageSync('user_id')
					}
				}
				this.myAjaxNewPost({
					model: 'message',
					controllerName: 'noteComment',
					actionName: 'insert',
					data: data,
					successBack: function(res) {
						console.log(res)
						if (res.data.message == '成功') {
							if (this.ischild == true) {
								var comment = {
									content: me.content,
									is_reply: true,
									map: {
										userinfo: {
											nick_name: uni.getStorageSync('nick_name')
										},
										replyinfo: {
											nick_name: me.huifuname
										}
									}
								}
							} else {
								var comment = {
									content: me.content,
									map: {
										userinfo: {
											nick_name: uni.getStorageSync('nick_name')
										},
									}
								}
							}

							me.youquanList[me.commentIndex].map.noteCommentEntities.splice(0, 0, comment)
						}
					}
				})

			},
			huifuComment(id, noteid, name, user_id, index) {
				if (this.iskeyFrame == false) {
					this.iskeyFrame = true
				} else {
					this.iskeyFrame = false
				}

				this.ischild = true
				this.id = id
				this.parent_id = noteid
				this.huifuname = name
				this.reply_id = user_id
				this.commentIndex = index
			},
			showComment(id, index) {
				if (this.iskeyFrame == false) {
					this.iskeyFrame = true
					uni.hideTabBar()
				} else {
					this.iskeyFrame = false
					uni.showTabBar()
				}
				this.ischild = false
				this.id = id
				this.huifuname = ''
				this.commentIndex = index

			},
			loseFocus() {
				this.iskeyFrame = false
				uni.showTabBar()
			},
			showShare(item) {
				this.iskeyFrame = false
				this.isshowShare = true
				this.isShowMask = true
				this.itemData = item
				uni.hideTabBar()
			},
			closeShare() {
				this.isshowShare = false
				this.isShowMask = false

				uni.showTabBar()

			},
			showGift(id, user_id) {
				if (this.isshowGift == true) {
					this.isshowGift = false
					this.isShowMask = false
					uni.showTabBar()
				} else {
					this.isshowGift = true
					this.isShowMask = true
					uni.hideTabBar()
				}
				this.iskeyFrame = false

				this.id = id
				this.payment_id = user_id


			},
			// 			showchooseNum() { //显示选择数量
			// 				if (this.isShowNum == true) {
			// 					this.isShowNum = false
			// 				} else {
			// 					this.isShowNum = true
			// 				}
			// 			},
			// 			chooseNum(num) { //选择礼物数量
			// 				this.giftNum = num
			// 				this.isShowNum = false
			// 			},
			// 			chooseSecret() { //是否公开
			// 				if (this.isSecret == true) {
			// 					this.isSecret = false
			// 				} else {
			// 					this.isSecret = true
			// 				}
			// 			},
			// 			chooseGift(index, id, money) {
			// 				this.menuIndex = index
			// 				this.type_id = id
			// 				this.giftMoney = money
			// 				// console.log(this.menuIndex)
			// 				// console.log(this.giftMoney)
			// 			},
			// 			setGift() {
			// 				var me = this;
			// 				var pay_count = this.giftMoney * this.giftNum;
			// 				if (pay_count > this.myInfo.cat_coin) {
			// 					uni.showToast({
			// 						title: '猫币不够呢',
			// 						icon: 'none'
			// 					})
			// 					return
			// 				}
			// 				// console.log(pay_count)
			// 				var data = {
			// 					user_id: uni.getStorageSync('user_id'),
			// 					type_id: this.type_id,
			// 					type: 'gift',
			// 					pay_id: this.id,
			// 					payment_id: this.payment_id,
			// 					pay_count: pay_count,
			// 					source:'note',
			// 				}
			// 				this.myAjaxNewPost({
			// 					model: 'user',
			// 					controllerName: 'userOrder',
			// 					actionName: 'insert',
			// 					data: data,
			// 					successBack: function(res) {
			// 						console.log(res)
			// 						if (res.data.data == '订单完成') {
			// 							me.getuserdata()
			// 							me.isShowMask = false
			// 							me.isshowGift = false
			// 							uni.showToast({
			// 								title:'赠送成功',
			// 								icon:'none'
			// 							})
			// 							me.getyouquanList();
			// 
			// 						}
			// 					},
			// 				})
			// 			},
			getuserdata() {
				var me = this;
				var data = {
					user_id: uni.getStorageSync('user_id')
				}
				this.myAjaxNew({
					model: 'user',
					controllerName: 'userInfo',
					actionName: 'queryUserInfoById',
					data: data,
					successBack: function(res) {
						console.log(res, '新用户详情')
						me.myInfo = res.data.data.userInfoEntity;
						uni.setStorageSync('user_info', me.myInfo)
					},
				})
			},
			hideAll() {
				this.isShowMask = false
				this.isshowGift = false
				uni.showTabBar()
			},

		}

	}
</script>

<style scoped>
	.fexHead {
		height: 168upx;
		background: #F4F4F4;
		display: flex;
		padding: 0 24upx;
		/* justify-content: space-between; */
		justify-content: center;
		box-sizing: border-box;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 999;
	}

	.fexHead image {
		height: 37upx;
		width: 37upx;
		padding-top: 100upx;
	}

	.fexHead text {
		color: #333333;
		font-size: 36upx;
		padding-top: 90upx;

	}

	/* 菜单栏 */
	.select-tab {
		width: 241upx;
		height: 242upx;
		border-radius: 10upx;
		position: fixed;
		right: 24upx;
		top: 235upx;
		z-index: 10000;
	}

	.sanjiaox {
		border-style: solid;
		border-width: 15upx 15upx 15upx 15upx;
		border-color: transparent transparent white transparent;
		width: 0upx;
		height: 0upx;
		position: absolute;
		right: 10upx;
		top: -27upx;
	}

	.hidden-box {
		width: 100%;
		height: 170upx;
		border-radius: 10upx;
		background-color: white;
	}

	.small-Box {
		height: 80upx;
		border-bottom: 1upx solid rgba(230, 230, 230, 1);
		display: flex;
		padding: 29upx 37upx;
		box-sizing: border-box;
		align-items: center;

	}

	.menuImg {
		height: 37upx;
		width: 37upx;
		position: absolute;
		right: 24upx;
		top: 24upx;
	}

	.small-Box.active {
		border: none;
	}

	.menu-title {
		font-size: 28upx;
		color: rgba(51, 51, 51, 1);
		margin-left: 20upx;
	}

	.small-Box image {
		width: 30upx;
		height: 30upx;
	}

	.small-Box .img1 {
		width: 28upx;
		height: 28upx;
	}



	.headBox {
		padding-top: 240upx;
		height: 560upx;
	}

	.headBgImg {
		height: 560upx;
		width: 100%;
	}
	.setImg{
		z-index: 20;
		color: #000000;
		font-size: 28upx;
		position: absolute;
		top:500upx;
		left: 295upx;
	}

	.head {
		width: 100%;
		display: flex;
		justify-content: space-between;
		height: 128upx;
		background: #ffffff;
		padding: 0 24upx;
		z-index: 200;
		box-sizing: border-box;
		padding-top: 70upx;
		position: absolute;
		top: 0;
		background-color: rgba(0, 0, 0, 0);
		color: #FFFFFF;
	}

	.head image {
		width: 37upx;
		height: 37upx;
	}

	.userImg {
		position: relative;
	}

	.userHead {
		width: 128upx;
		height: 128upx;
		border-radius: 50%;
		overflow: hidden;
	}

	.huiyuan {
		width: 30upx;
		height: 30upx;
		position: absolute;
		left: 10upx;
		bottom: 0;
	}

	.userBox {
		display: flex;
		position: absolute;
		right: 24upx;
		top: 680upx;
	}

	.userBox text {
		padding-top: 38upx;
		color: #FFFFFF;
		font-size: 32upx;
		padding-right: 10upx;
	}

	.movableRange {
		width: 100%;
		/* height: 90%; */
		position: absolute;
		z-index: 700;
	}

	.editBox {
		width: 118upx;
		height: 118upx;
		position: fixed;
		top: 1000upx;
		right: 0;
	}

	.editBox image {
		width: 100%;
		height: 100%;
	}

	/* 合并标题 */
	.padding-box {
		position: fixed;
		top: 160upx;
		width: 100%;
		z-index: 1000;
	}

	.jingjie-head {
		height: 88upx;
		width: 100%;
		display: flex;
		justify-content: center;
		background-color: white;
	}

	.menu {
		display: flex;
		align-items: center;
		font-size: 36upx;
		color: rgba(153, 153, 153, 1);
		position: relative;
		margin: 0 30upx;
	}

	.active {
		color: rgba(70, 206, 207, 1);

	}

	.active2 {
		color: #46CECF;
	}

	.smallBox {
		width: 100%;
		width: 75upx;
		height: 8upx;
		background: rgba(70, 206, 207, 1);
		border-radius: 5upx;
		position: absolute;
		top: 72upx;
		/* left: 15upx; */
	}

	/* 好奇 */
	.margin-box {
		padding-top: 218upx;
	}

	.aniu-box {
		width: 260upx;
		height: 78upx;
		background: rgba(255, 255, 255, 1);
		border: 1upx solid rgba(70, 206, 207, 1);
		border-radius: 10upx;
		margin: auto;
		margin-top: 40upx;
		margin-bottom: 120upx;
		justify-content: center;
	}

	.haoqi_item {
		margin-bottom: 20upx;
	}

	.shuaxin {
		width: 28upx;
		height: 28upx;
	}

	.font-style {
		font-size: 28upx;
		color: rgba(71, 206, 207, 1);
		margin-left: 15upx;
	}
	
</style>
